<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-date"></i> 审计
        </el-breadcrumb-item>
        <el-breadcrumb-item>财务审计</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="container">
        <div>
          <div class="title">
            <p>项目立项申请表</p>
          </div>
          <el-form ref="form" :rules="rules" :model="form" label-width="80px">
            <el-form-item class="nowrap" label="项目名称：" prop="projectName">
              <el-input v-model="form.projectName"></el-input>
            </el-form-item>

            <div class="nowrap">
              <el-form-item class="line nowrap" label="项目申请人：" prop="applyPerson">
                <el-input v-model="form.applyPerson"></el-input>
              </el-form-item>
              <el-form-item :inline="true" class="line nowrap" label="立项时间：" prop="proAppDate">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.proAppDate"></el-date-picker>
              </el-form-item>
            </div>

            <el-form-item class="nowrap" label="项目委托方：" prop="entrParty">
              <el-input v-model="form.entrParty"></el-input>
            </el-form-item>

            <el-form-item class="line nowrap" label="总负责人：" prop="headPerson">
              <el-input v-model="form.headPerson"></el-input>
            </el-form-item>
            <el-form-item :inline="true" class="line nowrap" label=" 联系方式：" prop="headPersonPhone">
              <el-input v-model="form.headPersonPhone"></el-input>
            </el-form-item>

            <div>
              <el-form-item class="line nowrap" label="开发负责人：" prop="devofficer">
                <el-input v-model="form.devofficer"></el-input>
              </el-form-item>
              <el-form-item :inline="true" class="line nowrap" label="联系方式：" prop="devofficerPhone">
                <el-input v-model="form.devofficerPhone"></el-input>
              </el-form-item>
            </div>

            <div>
              <el-form-item class="line nowrap" label="商务负责人：" prop="businessPerson">
                <el-input v-model="form.businessPerson"></el-input>
              </el-form-item>
              <el-form-item :inline="true" class="line nowrap" label="联系方式：" prop="busPersonPhone">
                <el-input v-model="form.busPersonPhone"></el-input>
              </el-form-item>
            </div>

            <el-form-item class="nowrap" label="项目承接方：" prop="underParty">
              <el-input v-model="form.underParty"></el-input>
            </el-form-item>

            <el-form-item class="line nowrap" label="总负责人：" prop="underHeader">
              <el-input v-model="form.underHeader"></el-input>
            </el-form-item>
            <el-form-item :inline="true" class="line nowrap" label=" 联系方式：" prop="underHeaderPhone">
              <el-input v-model="form.underHeaderPhone"></el-input>
            </el-form-item>

            <div>
              <el-form-item class="line nowrap" label="开发负责人：" prop="underDevOffiecer">
                <el-input v-model="form.underDevOffiecer"></el-input>
              </el-form-item>
              <el-form-item :inline="true" class="line nowrap" label="联系方式：" prop="underDevPhone">
                <el-input v-model="form.underDevPhone"></el-input>
              </el-form-item>
            </div>

            <div>
              <el-form-item class="line nowrap" label="商务负责人：" prop="underBusPerson">
                <el-input v-model="form.underBusPerson"></el-input>
              </el-form-item>
              <el-form-item :inline="true" class="line nowrap" label="联系方式：" prop="underBusPhone">
                <el-input v-model="form.underBusPhone"></el-input>
              </el-form-item>
            </div>

            <div>
              <el-form-item class="line nowrap" label="项目类型：" prop="type">
                <el-input v-model="form.type"></el-input>
              </el-form-item>
              <el-form-item :inline="true" class="line nowrap" label="执行地点：" prop="place">
                <el-input v-model="form.place"></el-input>
              </el-form-item>
            </div>

            <div>
              <el-form-item class="line nowrap" label="金额预算：" prop="money">
                <el-input v-model="form.money"></el-input>
              </el-form-item>
              <el-form-item :inline="true" class="line nowrap" label="产值预算：" prop="outValue">
                <el-input v-model="form.outValue"></el-input>
              </el-form-item>
            </div>

            <el-form-item label="承接风险" prop="risk">
              <el-input type="textarea" v-model="form.risk"></el-input>
            </el-form-item>
            <el-form-item label="进度规划" prop="planning">
              <el-input type="textarea" v-model="form.planning"></el-input>
            </el-form-item>
            <el-form-item label="预期成果" prop="expectedResult">
              <el-input type="textarea" v-model="form.expectedResult"></el-input>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit('form')">立即创建</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "baseform",
  data: function() {
    return {
      form: {
        writeDate: "", //填写日期
        projectName: "", //项目名称
        applyPerson: "", //项目申请人
        proAppDate: "", //立项时间
        entrParty: "", //委托方
        headPerson: "", //总负责人
        headPersonPhone: "", //总负责人联系方式
        devofficer: "", //开发负责人
        devofficerPhone: "", //开发负责人联系方式
        businessPerson: "", //商务负责人
        busPersonPhone: "", //商务负责人联系方式

        underParty: "", //承接方
        underHeader: "", //项目总负责人
        underHeaderPhone: "", //项目负责人电话
        underDevOffiecer: "", //项目开发负责人
        underDevPhone: "", //项目开发负责人电话
        underBusPerson: "", //商务负责人
        underBusPhone: "", //
        type: "", //项目类型
        place: "", //项目承接地点
        money: "", //金额
        outValue: "", //产值
        risk: "", //风险
        planning: "", //计划进度
        expectedResult: "" //预期成果
      },
      rules: {
        projectName: [{ required: true, message: "请输入", trigger: "blur" }],
        applyPerson: [{ required: true, message: "请输入", trigger: "blur" }],
        proAppDate: [{ required: true, message: "请输入", trigger: "blur" }],
        entrParty: [{ required: true, message: "请输入", trigger: "blur" }],
        headPerson: [{ required: true, message: "请输入", trigger: "blur" }],
        devofficer: [{ required: true, message: "请输入", trigger: "blur" }],
        businessPerson: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
        underParty: [{ required: true, message: "请输入", trigger: "blur" }],
        underHeader: [{ required: true, message: "请输入", trigger: "blur" }],
        underDevOffiecer: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
        underParty: [{ required: true, message: "请输入", trigger: "blur" }],
        underBusPerson: [
          { required: true, message: "请输入", trigger: "blur" }
        ],
        type: [{ required: true, message: "请输入", trigger: "blur" }],
        place: [{ required: true, message: "请输入", trigger: "blur" }],
        money: [{ required: true, message: "请输入", trigger: "blur" }],
        outValue: [{ required: true, message: "请输入", trigger: "blur" }],
        risk: [{ required: true, message: "请输入", trigger: "blur" }],
        planning: [{ required: true, message: "请输入", trigger: "blur" }],
        expectedResult: [
          { required: true, message: "请输入", trigger: "blur" }
        ],

        underHeaderPhone: [
          { required: true, message: "请输入正确号码", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],

        underBusPhone: [
          { required: true, message: "请输入正确号码", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],

        underDevPhone: [
          { required: true, message: "请输入正确号码", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],

        busPersonPhone: [
          { required: true, message: "请输入正确号码", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],

        devofficerPhone: [
          { required: true, message: "请输入正确号码", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ],

        headPersonPhone: [
          { required: true, message: "请输入正确号码", trigger: "blur" },
          {
            validator: function(rule, value, callback) {
              if (/^1[34578]\d{9}$/.test(value) == false) {
                callback(new Error("请输入正确的手机号"));
              } else {
                callback();
              }
            },
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    onSubmit() {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$axios.post("/api/users/login", this.form).then(res => {
            // 登录成功

            this.$message.success("提交成功！");
            this.$router.push("/index");
          });
        } else {
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.title {
  margin: 20px auto;
  text-align: center;
  font-size: 30px;
}
.container {
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.line {
  display: inline-block;
}
.nowrap {
  white-space: nowrap;
  margin-right: 10px;
}
</style>